<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';

html, body{
  background-color: #F6F6F6;
}
.container{
  position: relative;
  padding: 30px 0 0;
  background-color: #F6F6F6;
}

.index-head{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 184px;
  background-color: #FFDA44;
}

.index-wrap{
  position: relative;
  z-index: 10;
  margin: 0 20px;
  padding: 0 20px 80px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 40px;
}

.powering-model, .nopower-model{
  padding-top: 100px;
}

.power-wrap{
  margin: 0 auto;
  .flex-base();
  // width: 500px;
  // height: 200px;
  // border: 10px solid #ddd;

  .power-body{
    position: relative;
    z-index: 1;
    width: 338px;
    height: 182px;
    box-sizing: border-box;
    border-radius: 30px;
    border: 5PX solid #00a0e9;
    overflow: hidden;

    .power-in-wrap{
      width: 0%;
      height: 100%;
      background: linear-gradient(to right, #1fbbdd, #6cd5eb);
      animation: powerMove 2s ease-out 0s infinite;
      
      @keyframes powerMove {
        0%{ width: 0;}
        100%{ width: 100%;}
      }
    }
  }

  .power-head{
    position: relative;
    z-index: 10;
    width: 6px;
    height: 26px;
    background-color: #00a0e9;
    border-radius: 0 20px 20px 0;
    margin-left: -1px;
  }
}

.location-info{
  position: relative;
  margin-top: 70px;
  height: 108px;
  .px2px(font-size, 24PX);
  border-bottom: 1PX solid #cecece;
  .flex-base();
  
  .location-name{
    .px2px(font-size, 32PX);
  }

  .power-status{
    position: absolute;
    z-index: 1;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;

    &.power-not{
      color: #0078e5;
    }

    &.power-in{
      color: #47972e;
    }
  }
}

.power-info{
  height: 93px;
  box-sizing: border-box;
  padding: 0 18px;
  border-bottom: 1PX solid #cecece;
  color: #000;
  .px2px(font-size, 26PX);
  .flex-row-between;
}

.nopower-tips{
  margin-top: 50px;
  text-align: center;
  .px2px(font-size, 30PX);
  color: #ccc;
}

.code-img{
  display: block;
  margin: 50px auto 0;
  width: 305px;
  height: 305px;
}

.code-tips{
  position: relative;
  width: 670px;
  margin: 30px auto;
  box-sizing: border-box;
  padding: 22px 14px 22px 38px;
  .px2px(font-size, 24PX);
  background-color: #acb3b9;
  color: #fff;
  border-radius: 10px;

  .tips-icon{
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 27px;
    width: 19px;
    height: 20px;
    background-image: url(../assets/images/icons/tips-icon.png);
    margin-right: 5px;
  }
}
</style>
<template>
  <div class="container has-footer">
    <div class="index-head"></div>
    <div class="index-wrap">
      <!-- 当前正在充电 -->
      <div class="powering-model" v-if="initData.powerName">
        <div class="power-wrap">
          <div class="power-body">
            <div v-if="initData.chargeState === 'charging'" class="power-in-wrap"></div>
          </div>
          <div class="power-head"></div>
        </div>
        <div class="location-info">
          <p class="location-name">{{initData.powerName}}</p>
          <p class="power-status power-not" v-if="initData.chargeState === 'init'">已支付，未开始</p>
          <p class="power-status power-in" v-if="initData.chargeState === 'charging'">充电中</p>
          <p class="power-status" v-if="initData.chargeState !== 'init' && initData.chargeState !== 'charging'">状态：未明</p>
        </div>
        <div class="power-info">
          <p class="has-power">已使用{{initData.usedTime}}分钟</p>
          <p class="location-name">剩余时长{{initData.lastTime}}分钟</p>
        </div>
      </div>
      <!-- 当前暂无充电 -->
      <div class="nopower-model" v-if="!initData.powerName">
        <div class="power-wrap">
          <div class="power-body">
          </div>
          <div class="power-head"></div>
        </div>
        <p class="nopower-tips">暂无正在充电的设备</p>
      </div>
      <img v-if="isFromFlag === 0" class="code-img" src="../assets/images/icons/code.jpg" />
    </div>
    
    <p v-if="isFromFlag === 0" class="code-tips">
      <i class="bw-ico tips-icon"></i>
      为了更好地关注您的充电情况，请长按二维码识别关注公众号
    </p>
    <!-- 底部 -->
    <!-- <Footer :chosIndex="0" /> -->
  </div>
</template>
<script>
import Footer from '../components/footer'

export default {
  components: {
    Footer
  },
  data() {
    return {
      isFromFlag: 0,    // 是否从公众号进入 0 否， 1 是
      initData: {}       // 初始化数据
    }
  },
  async mounted() {
    this.isFromFlag = this.$route.query.flag ? this.$route.query.flag : 0
    let res = await this.request('index')
    // 修改loding的登录状态
    this.$store.commit('updateLoadingStatus', false)
    this.initData = res.data
  },
  methods: {
  }
}
</script>
